<template>
  <el-radio-group v-model="selectedValue" class="radio-with-sub-input" @change="handleChange">
    <div v-for="opt in options" :key="opt.value" class="option-row">
      <el-radio :value="opt.value" class="radio-item">
        <div class="option-content">
          <span>{{ opt.label }}</span>
          <span v-if="opt.otherLabel && selectedValue === opt.value" class="other-label">{{ opt.otherLabel }}</span>
          <template v-if="opt.izSub && selectedValue === opt.value">
            <span v-if="opt.subTitle" class="sub-title">{{ opt.subTitle }}</span>
            <el-input v-model="subInput" size="small" class="sub-input" style="width: 120px; margin-left: 8px" />
          </template>
        </div>
      </el-radio>
    </div>
  </el-radio-group>
</template>

<script setup lang="ts">
import { watch, ref, onMounted, nextTick } from "vue"

const props = defineProps<{
  modelValue: string
  options: Array<{
    value: string
    label: string
    izSub?: boolean
    subTitle?: string
  }>
}>()
const emit = defineEmits(["update:modelValue", "change"])

const selectedValue = ref("")
const subInput = ref("")

// 初始化回显
onMounted(() => {
  if (props.modelValue.includes(":")) {
    const [val, sub] = props.modelValue.split(":")
    selectedValue.value = val
    subInput.value = sub
  } else {
    selectedValue.value = props.modelValue
    subInput.value = ""
  }
})

// 当选项改变时更新
const handleChange = () => {
  const current = props.options.find((o) => o.value === selectedValue.value)
  const val = current?.izSub ? `${selectedValue.value}:${subInput.value || ""}` : selectedValue.value

  nextTick(() => {
    emit("update:modelValue", val)
    emit("change", val)
  })

  if (!current?.izSub) {
    subInput.value = ""
  }
}

watch(subInput, (val) => {
  const current = props.options.find((o) => o.value === selectedValue.value)
  if (current?.izSub) {
    emit("update:modelValue", `${selectedValue.value}:${val}`)
    emit("change", `${selectedValue.value}:${val}`) // ✅ 补上这一行
  }
})

watch(
  () => props.modelValue,
  (val) => {
    if (val.includes(":")) {
      const [val1, val2] = val.split(":")
      selectedValue.value = val1
      subInput.value = val2
    } else {
      selectedValue.value = val
      subInput.value = ""
    }
  }
)
</script>

<style scoped>
.radio-with-sub-input {
  display: flex;
  flex-direction: column;
}

.option-row {
  width: 100%;
}

.radio-item {
  width: 100%;
  display: flex;
}

.option-content {
  display: inline-block;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 0;
}

.sub-title {
  margin-left: 8px;
  color: #666;
  font-size: 14px;
}

.other-label {
  margin-left: 10px;
  font-weight: 600;
  color: red !important; /* 强制覆盖 Element Plus 默认颜色 */
}
/* 强制 label 自动换行 */
/* :deep(.el-radio__label) {
  white-space: normal !important;
  word-break: break-word;
} */
:deep(.el-radio) {
  align-items: center;
}

:deep(.el-radio__label) {
  display: block;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.1 !important;
  /* margin: 0 !important; */
  /* padding: 0 !important; */
}
</style>
